<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Overlay component - UIkit tests</title>
        <script src="../../vendor/jquery.js"></script>
        <script src="_test.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Overlay</h1>

            <h2>Area with icon</h2>

            <h3>Image, anchor, text</h3>

            <div class="uk-margin">

                <div class="uk-overlay">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-area"></div>
                </div>

                <a class="uk-overlay" href="#">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-area"></div>
                </a>

                <div class="uk-overlay uk-width-medium-1-4">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                    <div class="uk-overlay-area"></div>
                </div>

            </div>

            <h3>Thumbnail</h3>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-3">
                    <div class="uk-thumbnail uk-overlay-toggle">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area"></div>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <a class="uk-thumbnail uk-overlay-toggle" href="#">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area"></div>
                        </div>
                        <div class="uk-thumbnail-caption">Caption <code>&lt;a&gt;</code></div>
                    </a>
                </div>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-thumbnail">
                        <a class="uk-overlay" href="#">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area"></div>
                        </a>
                        <figcaption class="uk-thumbnail-caption">Caption <code>&lt;figure&gt;</code></figcaption>
                    </figure>
                </div>

            </div>

            <h2>Area with content</h2>

            <h3>Image, anchor, text</h3>

            <div class="uk-margin">

                <div class="uk-overlay">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-area">
                        <div class="uk-overlay-area-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
                    </div>
                </div>

                <a class="uk-overlay" href="#">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-area">
                        <div class="uk-overlay-area-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
                    </div>
                </a>

                <div class="uk-overlay uk-width-medium-1-4">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                    <div class="uk-overlay-area">
                        <div class="uk-overlay-area-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>
                    </div>
                </div>

            </div>

            <h3>Thumbnail</h3>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-3">
                    <div class="uk-thumbnail uk-overlay-toggle">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area">
                                <div class="uk-overlay-area-content">
                                    <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                    <button class="uk-button uk-button-primary">Button</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <div class="uk-thumbnail uk-overlay-toggle">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area">
                                <div class="uk-overlay-area-content">
                                    <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                    <button class="uk-button uk-button-primary">Button</button>
                                </div>
                            </div>
                        </div>
                        <div class="uk-thumbnail-caption">Caption</div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-thumbnail">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-area">
                                <div class="uk-overlay-area-content">
                                    <p>Lorem <a href="#">ipsum dolor</a> sit amet, consetetur sadipscing elitr.</p>
                                    <button class="uk-button uk-button-primary">Button</button>
                                </div>
                            </div>
                        </div>
                        <figcaption class="uk-thumbnail-caption">Caption <code>&lt;figure&gt;</code></figcaption>
                    </figure>
                </div>

            </div>

            <h2>Caption</h2>

            <h3>Image, anchor, text</h3>

            <div class="uk-margin">

                <div class="uk-overlay">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-caption">Some text</div>
                </div>

                <a class="uk-overlay" href="#">
                    <img src="holder.js/200x100/auto" alt="">
                    <div class="uk-overlay-caption">Some text</div>
                </a>

                <div class="uk-overlay uk-width-medium-1-4">
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                    <div class="uk-overlay-caption">Some text</div>
                </div>

            </div>

            <h3>Thumbnail</h3>

            <div class="uk-grid" data-uk-grid-margin>

                <div class="uk-width-medium-1-3">
                    <div class="uk-thumbnail uk-overlay-toggle">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-caption">Some text</div>
                        </div>
                    </div>
                </div>

                <div class="uk-width-medium-1-3">
                    <a class="uk-thumbnail uk-overlay-toggle" href="#">
                        <div class="uk-overlay">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-caption">Some text</div>
                        </div>
                        <div class="uk-thumbnail-caption">Caption <code>&lt;a&gt;</code></div>
                    </a>
                </div>

                <div class="uk-width-medium-1-3">
                    <figure class="uk-thumbnail">
                        <a class="uk-overlay" href="#">
                            <img src="holder.js/400x250/auto" alt="">
                            <div class="uk-overlay-caption">Some text</div>
                        </a>
                        <figcaption class="uk-thumbnail-caption">Caption <code>&lt;figure&gt;</code></figcaption>
                    </figure>
                </div>

            </div>

        </div>

    </body>
</html>